<template style="display: flex;align-items: center">

  <div style="display:flex; flex-direction: column; justify-content: center;align-items: center">
    <br>
    <br>
    <div style="text-align: center">
      <span style="font-size: x-large">会议室预约</span>
    </div>
    <br>
    <br>
    <el-form title="预约会议室" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="width: 90%" >

      <el-row >
        <el-col :span="24">
          <el-form-item label="会议室名称" prop="broadroomName">
            <el-select v-model="formData.broadroomName" placeholder="请选择会议室" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field104Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="企业名称" prop="deptName">
            <el-input v-model="formData.deptName" placeholder="请输入企业名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="预约时间段">
          <div style="display: flex; justify-content: space-between; width: 50%">
          <el-date-picker
            v-model="date"
            type="date" >
            placeholder="选择日期" >
          </el-date-picker>
          <el-time-select
            placeholder="开始时间"
            v-model="startTime"
            :picker-options="{
            start: '09:30',
            step: '00:30',
            end: '18:30'
            }">
          </el-time-select>
          <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
            start: '09:30',
            step: '00:30',
            end: '18:30',
            minTime: startTime
             }">
          </el-time-select>
          </div>
        </el-form-item>
      </el-row>
      <el-row >
        <el-col :span="24">
          <el-form-item label="联系人" prop="field118">
            <el-input v-model="formData.field118" placeholder="请输入联系人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="预约标题" prop="field116">
            <el-input v-model="formData.field116" placeholder="请输入标题" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="预约内容" prop="field121">
          <el-input v-model="formData.field121" type="textarea" placeholder="请输入预约内容"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-row>

      <el-form-item size="large" style="display: flex; justify-content: flex-end" >
        <el-button type="primary" @click="submitForm">预约</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        //选择日期
        date:'',
        //开始时间
        startTime:'',
        //结束时间
        endTime:'',
        formData: {
          field104: undefined,
          field109: undefined,
          field112: undefined,
          field111: undefined,
          field118: undefined,
          field116: undefined,
          field121: undefined
        },
        rules: {
          field104: [{
            required: true,
            message: '请选择下拉选择',
            trigger: 'change'
          }],
          field109: [{
            required: true,
            message: '请选择下拉选择',
            trigger: 'change'
          }],
          field112: [{
            required: true,
            message: '请选择下拉选择',
            trigger: 'change'
          }],
          field111: [{
            required: true,
            message: '请选择下拉选择',
            trigger: 'change'
          }],
          field118: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field116: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field121: [{
            required: true,
            message: '请输入多行文本',
            trigger: 'blur'
          }]
        },
        field104Options: [{
          'label': '选项一',
          'value': 1
        }, {
          'label': '选项二',
          'value': 2
        }],
        field109Options: [{
          'label': '选项一',
          'value': 1
        }, {
          'label': '选项二',
          'value': 2
        }],
        field112Options: [{
          'label': '选项一',
          'value': 1
        }, {
          'label': '选项二',
          'value': 2
        }],
        field111Options: [{
          'label': '选项一',
          'value': 1
        }, {
          'label': '选项二',
          'value': 2
        }]
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      }
    }
  }

</script>
<style>

</style>
